<!--
 * @FileDescription 菜单栏
 * @Author 杨宇翔
 * @Date 20220728 14:19:30
 * @LastEditors 杨宇翔
 * @LastEditTime 20220728 14:19:30
-->
<template>
    <div class="header">
        <span>{{ ExamSettings.Default.Title }}</span>
        <span>{{ ExamComponent.Default.DeviceStatus.value }}</span>
        <span v-if="ExamComponent.Default.HasContext.value">{{ ExamSettings.Default.Name }}</span>
        <span v-if="ExamComponent.Default.HasContext.value">{{ ExamComponent.Default.FormattedDuration.value }}</span>
        <button v-if="ExamComponent.Default.HasContext.value" class="reset" type="button"
            @click="ExamComponent.Default.SubmitAsync()">
            <span>提交</span>
        </button>
        <button class="reset" type="button" @click="ExamComponent.Default.OnExitAsync()"></button>
    </div>
</template>

<script setup lang="ts">
import ExamComponent from './ExamComponent';
import ExamSettings from './ExamSettings';
</script>

<style scoped>
.header {
    position: absolute;

    width: 100%;
    height: 6.2rem;

    background-color: #131520E6;

    display: flex;
    align-items: center;
    gap: 2rem;

    padding-left: 2rem;
    padding-right: 2rem;

    border-bottom: 0.1rem solid #36384B;
}

img {
    width: 3.2rem;
    height: 3.2rem;
}

span {
    color: #81859C;
    font-size: 2.4rem;
}

span:first-of-type {
    flex-grow: 1;
    color: #B1B1D4;
}

button:first-of-type {
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 0.5rem 2rem;
    border-radius: 0.8rem;
    border: 0.2rem solid #FFFFFF1A;
}

button:first-of-type>span {
    font-size: 1.6rem;

    background: linear-gradient(0deg, #807DE1 0%, #218CDE 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

button:last-of-type {
    outline: none;
    border: none;

    width: 4rem;
    height: 4rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    background-image: url('/static/Exam/icon_exit.png');

    cursor: pointer;
}
</style>